;
(function () {

  'use strict';

  angular.module('directives.customActivity')
    .directive('generatorSummaryPage', generatorSummaryPage)
    .directive('slider', slider)
    .directive('generatorSummaryPreviewPage', generatorSummaryPreviewPage);

  function generatorSummaryPage($state, generatorSummaryPageService) {

    return {
      restrict: 'A',
      link: function (scope, element) {
        scope.page = generatorSummaryPageService;
        scope.page.init(parseInt($state.params.summaryId), element, scope);
      }
    };
  }

  generatorSummaryPage.$inject = ['$state', 'generatorSummaryPageService'];

  function generatorSummaryPreviewPage($compile, pageConfigService) {

    return {
      restrict: 'A',
      link: function (scope, element) {
        element.empty().append($compile(pageConfigService.pageInfo.layout)(scope));
        scope.page.e = $(element).ckDrag();//返回当前元素实例
        scope.page.e.addDragEvent();
      }
    };
  }

  generatorSummaryPreviewPage.$inject = ['$compile', 'pageConfigService'];

  function slider($compile, generatorSummaryPageService, SUMMARY_MODULE) {

    return {
      restrict: 'A',
      template: '<div class="center">' +
      '<div class="modules">' +
      '<span class="arrow left" ng-click="arrowLeft(list.length-1)"></span>' +
      '<ul></ul>' +
      '<span class="arrow right" ng-click="arrowRight(list.length-1)"></span>' +
      '<ul class="tabsli" style="left: calc(50% - {{list.length*17 / 2}}px);">' +
      '<li ng-repeat="slider in list" ng-click="setCurrentShow($index)" ng-class="{\'active\': $index === currentShow}"></li>' +
      '</ul>' +
      '</div>' +
      '</div>',
      scope: true,
      replace: true,
      link: function (scope, element, attrs) {

        scope.list = [];//子页面LIST

        //指令字符串转为对应的模块常量Key
        //例：summary-bus-volume-contrastive BUS_VOLUME_CONTRASTIVE
        var sliderConstant = attrs.sliderInclude.replace('summary-', '').replace(/-/g, '_').toUpperCase();

        //遍历当前模块下的子模块，找到对应的子模块添加到LIST中
        angular.forEach(SUMMARY_MODULE[sliderConstant], function (value, key) {
          if (generatorSummaryPageService.pageInfo.selectedModules.indexOf(value) >= 0) {
            scope.list.push({
              busLine: key
            });
          }
        });

        if (scope.list.length) {
          var temp = '';
          //拼接模板
          angular.forEach(scope.list, function (obj, idx) {
            temp += '<li class=\'dataItem slide\' ng-class=\'list[' + idx + '].style\'><div class=\'center\' ' + attrs.sliderInclude + '=\'' + obj.busLine + '\'></div></li>';
          });
          //动态编译模板，追加到UL标签里
          angular.element(element.find('ul')[0]).append($compile(temp)(scope));
        }

        scope.currentShow = 0;//当前子页面的下标

        //子页面左移
        scope.arrowLeft = function (idx) {
          if (scope.currentShow > 0) {
            scope.currentShow--;
          } else {
            scope.currentShow = idx;
          }
        };

        //子页面右移
        scope.arrowRight = function (idx) {
          if (scope.currentShow < idx) {
            scope.currentShow++;
          } else {
            scope.currentShow = 0;
          }
        };

        //子页面跳转
        scope.setCurrentShow = function (index) {
          scope.currentShow = index;
        };

        //当子页面下标改变时
        //子页面样式为 slider-show
        //子页面前一个样式为 slider-hide-to-right
        //子页面后一个样式为 slider-hide-to-left
        //其它样式为 slider-hide
        scope.$watch('currentShow', function () {
          angular.forEach(scope.list, function (obj, index) {
            if (index === scope.currentShow) {
              obj.style = 'slider-show';
            } else if ((index + 1 === scope.list.length ? 0 : index + 1) === scope.currentShow) {
              obj.style = 'slider-hide-to-left';
            } else if ((index - 1 === -1 ? scope.list.length - 1 : index - 1) === scope.currentShow) {
              obj.style = 'slider-hide-to-right';
            } else {
              obj.style = 'slider-hide';
            }
          });
        });


      }
    }
  }

  slider.$inject = ['$compile', 'generatorSummaryPageService', 'SUMMARY_MODULE'];
})();